{% extends "layout.html" %}


{% block body %}

<div class="container">

                <div class="row" style="padding: 10px 10px 10px;">
     
            <form method=POST action="{{ url_for('learnmode') }}" >

       
            <button type="submit" class= "btn btn-info  col-xs-3 col-sm-3 col-md-3 col-lg-3 " name="download" value=True  >Learnmode</button>
     

            </form>
                <div >     
                  <button type="submit" class= "btn btn-info col-xs-3 col-sm-3 col-md-3 col-lg-3  " id="shuffle" value=True  >Shuffle </button>
               </div> 
               


        	</div>

        <div class="row" style="padding: 10px 10px 10px;">
          <span class="text-muted" >Please click the first audio to play</span>
        </div>
     

                  <div  class="row " style="padding: 10px 10px 10px;">
          <div class="text-muted col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <span id="bing_search_text">
              
            </span>
          </div>
              <div class="btn btn-info col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <a id="magi_search" href="" >Magi!</a>
              </div> 
<div class="btn btn-info col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <a id="bing_search" href="" >Bing!</a>
              </div> 
          </div>

          <div>    

    <ul class="list-group" style="list-style-type:none">


 
        <li  class="list-group-item " id="li" style="border: 1px solid blue"> 
        <div style="padding: 10px 10px 10px;">
                      
                                  
                   <div class="row "  >
                          <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <p class="text-primary lead font-weight-bold "  preload="auto" id="word" style="zoom:120%;"></p>
                          </div> 
         
                   
                  <div class="float-right ">
                      <p class="text-muted col-xs-2 col-sm-2 col-md-2 col-lg-2 " id="user_level"></p>
                      </div>
                       </div> 

                      <div class="row">
                            <audio    controls="controls"  preload="auto" type="audio/mp3" class="wordMusic col-xs-8 col-sm-8 col-md-8 col-lg-8"></audio> 
                            </div>         
          </div> 
         <div style="padding: 10px 10px 10px;">
            <div class="row" >
             
                    <img class ="img-rounded img-responsive col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_a" >

                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_b" >
                 
          
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_c" >
                
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_d"  >
                    </div>        
             </div> 

          <div style="padding: 10px 10px 10px;">
    
         
            <div class="row"  >
               <span class="text-muted" > [Tips:]</span>

                <span class="text-responsible" id="word_tip"></span>
              </div>  
             <div class="row"> 
              <span class="text-muted"> [Defintion:]</span>
              <span class="text-responsible" id="word_def"> </span>
            </div>
 
              <div class="btn btn-info col-xs-6 col-sm-6 col-md-6 col-lg-6">
              <a id="wiki_search" href="" >wiki</a>
              </div> 
                <div class="btn btn-info  col-xs-6 col-sm-6 col-md-6 col-lg-6">
              <a id="youglish_search" href="" >youglish</a>
              </div> 
              <div>
                <span>'    '</span>
              </div>
            
             </div>  

        </li class="list-group">

 

   

    </ul>

 </div>  

           <div  style="padding: 10px 10px 10px;">


              <div class="row">
                <button  class="btn disabled btn-block" >  Vocavola         </button>
             </div>

            </div>

</div>

<script  src="/static/js/bagmode.js" type=text/javascript >

</script>

{% endblock %}

